<template>
  <IdxLayout>
    <div class="HandlePage">
      <!-- 结构修改 -->
      <div class="top-common-info">
        <!-- 司机、车次、日期公用信息模块 -->
        <div class="handle-common-info">
          <div class="info-item">
            <span class="name">司机：</span>
            <span class="detail">{{ currentIdxDetail.driverName || '无' }}</span>
          </div>
          <div class="info-item">
            <span class="name">车次：</span>
            <span class="detail">{{ currentIdxDetail.trainNum || '无' }}</span>
          </div>
          <div class="info-item">
            <span class="name">日期：</span>
            <span class="detail">{{ currentIdxDetail.date || '无' }}</span>
          </div>
        </div>
      </div>
      <div class="handle-tab-content">
        <div class="el-menu-left">
          <!-- <el-menu :default-active="menuActive">
          <el-menu-item
            :index="item.text"
            :key="index"
            @click="linkMenu(item.text)"
            v-for="(item, index) in menuArr"
          >
            <i :class="item.icon" />
            <span slot="title">
              {{ item.text }}
            </span>
          </el-menu-item>
          </el-menu>-->
          <!-- 重写的menu -->
          <div class="left-menu-item" :class="{active: menuActive === item.text}" v-for="(item, index) in menuArr" @click="linkMenu(item.text)" :key="index">{{ item.text }}</div>
        </div>
        <div class="table-right">
          <!-- 司机、车次、日期公用信息模块 -->
          <!-- <div class="handle-common-info">
          <div class="info-item">
            <span class="name">司机：</span>
            <span class="detail">560230</span>
          </div>
          <div class="info-item">
            <span class="name">车次：</span>
            <span class="detail">23033</span>
          </div>
          <div class="info-item">
            <span class="name">日期：</span>
            <span class="detail">2020-03-20</span>
          </div>
          </div>-->
          <!-- v-loading="activeMenuObj.model.loading" -->
          <component :is="activeMenuObj.component" @look-item="lookItem" @look-action-item="lookActionItem"  element-loading-text="拼命加载中" @redirectToVideo="goVideo" @submitComments="submitComments" :analysis-phase-list="analysisPhaseList" :current-idx-detail="currentIdxDetail" :load-analysis-form="loadAnalysisForm" />
        </div>
      </div>
      <!--手势地址-->
      <DialogForm class="dialog-form" :dialog-form-visible="DialogVisible" :dialog-title="info.name" :foot-show="false" @dialog-cancel="dialogCancel">
        <div class="dialog-content">
          <img :src="info.file" class="dialog-img" v-if="ItemType === 'img'" />
          <div class="dialog-video" v-else-if="ItemType === 'arr'">
            <div class="video-content video-box">
              <span class="title color1">原视频</span>
              <video class="video" :src="info.beforeAddr" autoplay controls />
            </div>
            <div class="video-content video-box">
              <span class="title color2">识别后</span>
              <video class="video" :src="info.afterAddr" autoplay controls />
            </div>
          </div>
          <div class="dialog-video" v-else>
            <div class="video-content">
              <video class="video" :src="info.handFile" autoplay controls />
            </div>
          </div>
        </div>
      </DialogForm>
      <!--动作定位-->
      <DialogForm class="dialog-form" :dialog-form-visible="DialogActionVisible" :dialog-title="info.name" :foot-show="false" @dialog-cancel="dialogActionCancel">
        <div class="dialog-content">
          <img :src="info.file" class="dialog-img" v-if="ItemType === 'img'" />
          <div class="dialog-video" v-else-if="ItemType === 'arr'">
            <div class="video-content video-box">
              <span class="title color1">原视频</span>
              <video class="video" :src="info.beforeAddr" autoplay controls />
            </div>
            <div class="video-content video-box">
              <span class="title color2">识别后</span>
              <video class="video" :src="info.afterAddr" autoplay controls />
            </div>
          </div>
          <div class="dialog-video" v-else>
            <div class="video-content">
              <video class="video" :src="info.confirmFile" autoplay controls />
            </div>
          </div>
        </div>
      </DialogForm>
    </div>
  </IdxLayout>
</template>
<script>
// import { Component, Vue, Watch, Mixins } from 'vue-property-decorator';
// import { Idx, AnalysisHandle } from '@/views/analysis/mixins';
// import { Handle } from '@/store/modules/handle/mixins';
import tableOne from './tableOne.vue';
import tableTwo from './tableTwo.vue';
import tableThree from './tableThree.vue';
import tableFour from './tableFour.vue';
import tableFive from './tableFive.vue';
import tableSix from './tableSix.vue';
import DialogForm from '../detail/idx/components/DialogForm.vue'
// import IdxLayout from '@/views/analysis/layout/idx/index.vue';
export default {
    components: {
    tableOne,
    tableTwo,
    tableThree,
    tableFour,
    tableFive,
    tableSix,
    DialogForm,
    // IdxLayout
  },
  data(){
    return{
      menuActive: '标准化作业',
      ItemType: '',
      info: '',
      type: '',
      DialogVisible: false,
      DialogActionVisible: false,
      currentIdxDetail: {}
    }
  },
  computed: {
    activeMenuObj: {
      get(){
        const obj = this.menuArr.find((menu) => menu.text === this.menuActive);
        return obj;
      }
    },
    menuArr: {
      get(){
        return [
          {
            text: '标准化作业',
            icon: 'el-icon-help',
            component: 'tableOne',
            model: this.hand
          },
          {
            text: '机械间',
            icon: 'el-icon-discount',
            component: 'tableTwo',
            model: this.room
          },
          {
            text: '遮挡',
            icon: 'el-icon-s-release',
            component: 'tableThree',
            model: this.cover
          },
          {
            text: '前方障碍物',
            icon: 'el-icon-receiving',
            component: 'tableFour',
            model: this.front
          },
          {
            text: '打电话',
            icon: 'el-icon-phone-outline',
            component: 'tableFive',
            model: this.phone
          },
          {
            text: '抽烟',
            icon: 'el-icon-smoking',
            component: 'tableSix',
            model: this.smoking
          }
    ];
      }
    }
  },
  methods:{
    linkMenu(item){
      this.menuActive = item;
    },
    lookItem(params){
      this.ItemType = params.type;
      this.DialogVisible = true;
      this.info = params.row;
    },
    lookActionItem(params){
      this.ItemType = params.type;
      this.DialogActionVisible = true;
      this.info = params.row;
    },
    dialogCancel() {
      this.DialogVisible = false;
    },
    dialogActionCancel() {
      this.DialogActionVisible = false;
    },
    goVideo(row) {
      this.redirectToVideo(
        this.idxId,
        new Date(row.startTime).getTime(),
        row.file
      );
    },
    submitComments(form) {
      this.submitAnalysisForm(form.phase, form.data, this.currentIdxDetail);
      this.hand.query({
        recordId: this.lkjId
      });
    }
  },
  Watch: {
    'menuActive'(newV,oldV){
      console.log(newV,oldV)
    },
    'lkjId'(newV,oldV){
      if (!this.lkjId) return;
      this.activeMenuObj.model.query({
        recordId: this.lkjId
      });
    }
  },
  mounted(){
    // this.$route.meta.idx = this.getIdxDetail(this.idxId);
    // this.getAnalysisPhases(this.lkjId);
  },
  activated(){
    this.menuActive = '标准化作业';
  },
}
</script>
<style scoped>
.HandlePage {
  font-size: 13px;
  border: 1px solid #e6e6e6;
  height: 100%;
  position: relative;
}
/deep/.el-menu {
  height: 100%;
  background-color: rgba(44, 95, 177, 0.1);
}
.el-menu-item.is-active {
  background-color: #2c5fb1;
  color: #f2f6fc;
}
.HandlePage .handle-tab-content {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
}
.HandlePage .top-common-info {
  height: 40px;
  background: #fffbe6;
}
.handle-common-info {
  line-height: 40px;
  border-bottom: 1px solid #ffe58f;
  padding-left: 24px;
}
.info-item {
  display: inline-block;
  font-size: 14px;
  margin-right: 148px;
}
.info-item:last-child {
  margin-right: 0;
}
span {
  font-weight: bold;
}
span .name {
  color: #000;
}
span .detail {
  color: #faad14;
  color: orange;
}
.el-menu-left {
  width: 180px;
  height: 100%;
  border-right: solid 1px #e6e6e6;
  position: relative;
  z-index: 9;
}
.left-menu-item {
  height: 40px;
  line-height: 40px;
  padding-left: 24px;
  font-size: 13px;
  color: #717171;
  cursor: pointer;
}
.left-menu-item .active {
  background: rgba(0, 145, 255, 0.12);
  border-right: 3px solid #0091ff;
  color: #0091ff;
}
.table-right {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-left: 180px;
  box-sizing: border-box;
}
/deep/.el-tag {
  cursor: pointer;
}
/deep/.header-all {
  display: flex;
  justify-content: space-around;
  height: 80px;
  align-items: center;
  font-size: 18px;
}
/deep/.header-all > p.type-active span {
  text-decoration: underline;
  color: green !important;
  font-size: 23px;
}
/deep/.header-all > p span.type-value {
  color: rgb(44, 95, 177);
}
/deep/.header-all > p span {
  transition: 0.2s;
  padding: 0 5px;
  cursor: pointer;
}
/deep/.header-all > p span:hover {
  text-decoration: underline;
  color: blue;
  font-size: 23px;
}
.dialog-form .dialog-video {
  display: flex;
  height: 100%;
  width: 100%;
}
.dialog-form .dialog-video .video-box {
  width: 50%;
}
.dialog-form .dialog-video .video-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.dialog-form .dialog-video .video-content .title {
  font-size: 24px;
  margin-bottom: 20px;
}
.dialog-form .dialog-video .video-content .color1 {
  color: #5a88d1;
}
.dialog-form .dialog-video .video-content .color2 {
  color: #67c23a;
}
.dialog-form .dialog-video .video-content video {
  display: block;
  width: 100%;
  height: 100%;
  background: teal;
  outline: none;
  -o-object-fit: fill;
  object-fit: fill;
}
.dialog-form .dialog-content {
  display: flex;
  height: 55vh;
}
.dialog-form .dialog-img {
  height: 100%;
  width: 100%;
}
</style>
